<template>
  <div class="card">
    <div class="card-left">
      <div class="card-icon">
        <a-icon :type="icon" />
      </div>
    </div>
    <div class="card-right">
      <div class="card-num">{{ num }}</div>
      <div class="card-title">{{ title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: "",
    },
    num: {
      type: [String, Number],
      default: 0,
    },
    title: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex: 1;
  margin-right: 10px;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

  &:last-child {
    margin-right: 0;
  }
  .card-left {
    .card-icon {
      width: 50px;
      height: 50px;
      font-size: 30px;
      color: #fa962b;
    }
  }
  .card-right {
    margin-left: 10px;
    .card-num {
      font-size: 24px;
      color: #333;
    }
    .card-title {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
